<template>
  <section style="display:inline-block">
    <ym-dialog width="460px"
               :visible.sync="dialogVisible"
               :title="title"
               hide-footer
               center>
      <el-form inline
               label-width="100px"
               label-position="right">
        <el-form-item label="手机号"
                      required>
          <el-input v-model="phoneNum"
                    placeholder="请填写手机号"
                    style="width:310px"></el-input></el-form-item>
        <el-form-item label="手机验证码"
                      required>
          <el-input v-model="form.Code"
                    placeholder="手机验证码"
                    style="width:310px">
            <el-button slot="append"
                       @click="sendCode"
                       v-if="time<=0">{{time==-1?'发送验证码':'重新发送'}}</el-button>
            <el-button slot="append"
                       v-if="time>0">{{time}}s后重新获取</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="新密码"
                      required>
          <el-input v-model="form.passsword"
                    placeholder="输入新密码"
                    style="width:310px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="footer">
        <el-button @click="dialogVisible = false"
                   size="small">关闭</el-button>
        <el-button @click="submit"
                   :loading="submitLoading"
                   type="primary"
                   size="small">保存</el-button>
      </div>
    </ym-dialog>
  </section>
</template>
<script>
import { cloneDeep, debounce } from 'lodash'
export default {
  name: 'ym-password',
  props: {
    title: {
      type: String,
      default: '忘记密码'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialogVisible: false,
      phoneNum: '',
      form: {},
      time: -1,
      timeout: null,
      submitLoading: false
    }
  },
  watch: {
    visible (v) {
      this.dialogVisible = v
    },
    dialogVisible (v) {
      this.$emit('update:visible', v)
      if (!v) {
        clearInterval(this.timeout)
        this.time = -1
      }
    },
  },
  computed: {
    operations () {
      return this.$store.state.menu.operations
    }
  },
  methods: {
    sendCode: debounce(function () {

      if (!this.phoneNum) {
        this.$message.warning('请填写手机号')
        return
      }
      if (this.time > 0) return
      this.$command.execute({
        method: 'post',
        api: `/sms/send?phoneNum=${this.phoneNum}`,
        params: {}
      }).then(res => {
        this.form.BizId = res.data.BizId
        this.time = 59
        this.timeout = setInterval(() => {
          if (this.time == 1) {
            clearInterval(this.timeout)
          }
          this.time--
        }, 1000)
      }).catch(err => {
        console.log(err)
      })
    }, 500),
    submit () {
      let data = cloneDeep(this.form)
      if (!this.phoneNum) {
        this.$message.warning('请填写手机号')
        return
      }
      if (!data.Code) {
        this.$message.warning('请填写验证码')
        return
      }
      if (!data.passsword) {
        this.$message.warning('请填写登陆密码')
        return
      }
      this.submitLoading = true
      this.$command.execute({
        api: "/sms/upUserPWofSMS",
        data: {
          BizId: data.BizId,
          Code: data.Code,
          password: data.passsword

        },
        params: {
          phoneNum: this.phoneNum
        }
      }).then(res => {
        this.$message.success('密码重置成功')
        this.submitLoading = false
        this.dialogVisible = false
      }).catch(err => {
        this.submitLoading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: center;
}
</style>
